<template>
	<div class="pro_div">
		<div class="img_top">
			<img :src="back_img.img" alt="" />
			<span> {{ back_img.intro }} </span>
		</div>
		<div class="flex-c-c-c" style="width: 100%; height: 100px">
			<span style="color: #534036; font-size: 40px; margin-top: 40px">产品中心</span>
			<img src="../assets/bl.svg" style="width: 64px; height: auto; margin-top: 28px" />
		</div>
		<div class="flex-r-c-s" style="margin: 50px 0;">
			<div style="width: 360px;height:1490px;background-color: #b69b8c;overflow: hidden;" class="divs_mume">
				<el-menu default-active="0-0" class="el-menu-vertical-demo" background-color="#b69b8c"
					text-color="#ffffff" :unique-opened="true" active-text-color="#B6633ACB">
					<el-submenu v-for="(v, i) in tit_list" :key="i" :index="'' + i + ''">
						<template slot="title">
							<span style="font-size: 24px;">{{ v.cname }}</span>
						</template>
						<el-menu-item-group>
							<el-menu-item v-for="(v1, i1) in v.second" :key="i1" :index="i + '-' + i1" @click="fn(v1)">
								<span style="font-size: 18px;">{{ v1.cname }}</span>
							</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
				</el-menu>
			</div>
			<div class="flex-r-c-c" style="width:1100px;flex-wrap: wrap!important;justify-content: left!important;"
				v-if="(list.data.length != 0 && showList)">
				<div v-for="(v, i) in list.data" :key="i" class="flex-c-c-c cur" @click="canping(v)"
					style="width: 295px;height: 350px;margin-bottom: 30px;margin-left: 50px;">
					<div class="flex-c-c-c" style="width: 295px;height: 310px;overflow: hidden;">
						<img :src="v.img" style="width: 295px;height: auto;">
					</div>
					<span style="font-size: 24px;color: #000;line-height: 40px;">
						{{ v.title }}
					</span>
				</div>
			</div>
			<div class="product-details" style="" v-if="!showList">
				<div class="detail-top">
					<div class="carousel">
						<el-carousel :interval="5000" arrow="always">
							<el-carousel-item v-for="item in details.imgs" :key="item">
								<img :src="item" alt="" >
							</el-carousel-item>
						</el-carousel>
					</div>
					<div class="specs_describe">
						<div class="title">标题</div>
						<div class="content">详情</div>
						<div class="zx">立即咨询</div>
					</div>
				</div>
				<div class="detail-content">
					<div class="title">产品详情</div>
					<div class="value">详情</div>
				</div>
			</div>
			<div v-if="list.data.length == 0" style="width:1100px;">
				<el-empty description="该分类暂无商品"></el-empty>
			</div>
		</div>
		<div class="flex-c-c-c" style="width: 100%; height: 100px; margin-top: 123px">
			<div>
				<el-pagination background layout="total, prev, pager, next, jumper" :total="list.total"
					:page-size="list.per_page" hide-on-single-page @current-change='fn_fenye'>
				</el-pagination>
			</div>
		</div>
		<div class="flex-c-c-c"
			style="width: 100%;height: 100vh;position: fixed;top: 0;left: 0;background-color: #46464287;" v-if="is"
			@click="is = false">
			<div class="flex-c-c-c cur"
				style="padding: 20px;width: 830px;height: 700px;background-color: #FFFFFF;border-radius: 20px;overflow: hidden;"
				@click.stop>
				<div v-html="sp_obj.content" class="img_fwb">

				</div>
			</div>
		</div>
	</div>
</template>

<script>
import {
	Message,
	MessageBox
} from 'element-ui';
export default {
	data() {
		return {
			back_img: {},
			tit_list: [],
			obj: {
				id: null,
				page: 0
			},
			list: {},
			sp_obj: {},
			is: false,
			showList: true,
			details:null
		};
	},
	mounted() {
		let headers = {
			token: this.$md5(this.$key + this.$dataTime()),
			rtimes: this.$dataTime(),
			btype: 'goods'
		}
		this.$axios.post(this.$base + '/Index/getBg', headers).then((res) => {
			if (res.data.code == 2000) {
				this.back_img = res.data.data
			} else {
				Message.error(res.data.msg);
			}
			console.log(res)
		})
			.catch(function (error) {
				Message.error(error.message);
			});
		headers.title = 'goods'
		this.$axios.post(this.$base + '/Index/getWebInfo', headers).then((res) => {
			if (res.data.code == 2000) {
				var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
				link.type = 'image/x-icon';
				link.rel = 'shortcut icon';
				link.href = res.data.data.ico;
				document.title = res.data.data.web_title
				document.getElementsByTagName('head')[0].appendChild(link);
			} else {
				Message.error(res.data.msg);
			}
			console.log(res)
		})
			.catch(function (error) {
				Message.error(error.message);
			});
		this.type_fl_fn()
	},
	methods: {
		fn_fenye(el) {
			this.obj.page = el
			this.qingqiu()
		},
		fn(el) {
			this.showList = true
			if (el.id == this.obj.id) return
			this.obj = {
				id: el.id,
				page: 0
			}
			this.obj.page = this.obj.page + 1
			this.qingqiu()
		},
		qingqiu() {
			let headers = {
				token: this.$md5(this.$key + this.$dataTime()),
				rtimes: this.$dataTime(),
				id: this.obj.id,
				page: this.obj.page
			}
			this.$axios.post(this.$base + '/Goods/goodsLists', headers).then((res) => {
				if (res.data.code == 2000) {
					console.log(res.data.data)
					this.list = res.data.data
				} else {
					Message.error(res.data.msg);
				}
				console.log(res)
			})
				.catch(function (error) {
					Message.error(error.message);
				});
		},
		type_fl_fn() {
			let headers = {
				token: this.$md5(this.$key + this.$dataTime()),
				rtimes: this.$dataTime(),
			}
			this.$axios.post(this.$base + '/Goods/goodsClass', headers).then((res) => {
				if (res.data.code == 2000) {
					this.tit_list = res.data.data
					console.log(res.data.data)
					this.obj = {
						id: res.data.data[0].second[0].id,
						page: 0
					}
					this.obj.page = this.obj.page + 1
					this.qingqiu()
				} else {
					Message.error(res.data.msg);
				}
				console.log(res)
			})
				.catch(function (error) {
					Message.error(error.message);
				});
		},
		canping(v) {
			let headers = {
				token: this.$md5(this.$key + this.$dataTime()),
				rtimes: this.$dataTime(),
				id: v.id
			}
			this.$axios.post(this.$base + '/Goods/goodsDetails', headers).then((res) => {
				if (res.data.code == 2000) {
					this.details = res.data.data
					console.log(this.details)
					this.showList = false;
					// this.is = true
					// this.sp_obj = v
				} else {
					Message.error(res.data.msg);
				}
				// console.log(res)
			})
				.catch(function (error) {
					Message.error(error.message);
				});
		},
		// canping(v) {
		// 	let headers = {
		// 		token: this.$md5(this.$key + this.$dataTime()),
		// 		rtimes: this.$dataTime(),
		// 		id: v.id
		// 	}
		// 	this.$axios.post(this.$base + '/Goods/goodsDetails', headers).then((res) => {
		// 			if (res.data.code == 2000) {
		// 				this.is = true
		// 				this.sp_obj = v
		// 			} else {
		// 				Message.error(res.data.msg);
		// 			}
		// 			console.log(res)
		// 		})
		// 		.catch(function(error) {
		// 			Message.error(error.message);
		// 		});
		// }
	}
};
</script>

<style lang="less" scoped>
.product-details {
	width: 1100px;
	display: flex;
	flex-direction: column;
	background: #fff;
	margin-left: 20px;
	padding: 10px;

	.detail-top {
		display: flex;
		min-height: 300px;
		.carousel {
			width: 40%;
			img{
				height: auto;
				width: 100%;
			}
		}

		.specs_describe {
			.title {}

			.content {}

			.zx {}
		}
	}

	.detail-content {
		.title {}

		.value {}
	}
}

.img_top {
	width: 100%;
	height: 500px;
	overflow: hidden;
	position: relative;

	img {
		width: 100%;
		height: auto;
	}

	span {
		position: absolute;
		left: 346px;
		top: 180px;
		line-height: 80px;
		font-size: 40px;
		color: #dcdcdc;
		letter-spacing: 10px;
		font-weight: 600;
	}
}

.divs_mume {
	/deep/ .el-menu {
		border-width: 0px;
	}

	/deep/.el-submenu__icon-arrow {
		color: #000;
	}

	/deep/.el-icon-arrow-down {
		color: #000;
	}
}

.img_fwb /deep/ img {
	height: 700px !important;
	width: auto !important;
}
</style>
